<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>列表</title>
    <link rel="stylesheet" href="./sw.css" />
    <link
      rel="stylesheet"
      href="http://at.alicdn.com/t/c/font_3910686_wwn9a8cvcfp.css"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        width: 100%;
        text-align: center;
        background-color: #f5f5f5;
      }
      .herder {
        width: 100%;
        height: 40px;
        background-color: black;
      }
      .tou {
        width: 1226px;
        height: 40px;
        margin: 0 auto;
      }
      .box {
        width: 1226px;
        background-color: coral;
        margin: 0 auto;
      }
      a {
        text-decoration: none;
      }
      .lf {
        width: 70%;
        height: 40px;
        line-height: 40px;
        float: left;
      }
      .lf a {
        color: darkcyan;
        font-size: 12px;
      }
      .lf a:hover {
        color: #fff;
      }
      .lf span {
        color: rgb(37, 37, 37);
        font-size: 10px;
        margin: 5px 0;
      }
      .rg {
        width: 30%;
        height: 40px;
        color: 12px;
        color: cadetblue;
        float: right;
        line-height: 40px;
        font-size: 12px;
      }
      .rg span {
        margin: 0 5px;
        color: rgb(55, 54, 54);
      }
      .rg a {
        color: cadetblue;
      }
      .rg a:hover {
        color: #fff;
      }
      .rg .cart {
        display: inline-block;
      }
      .rg .mp {
        display: inline-block;
        position: relative;
      }
      .rg .mp b {
        color: #fff;
        display: block;
        width: 100px;
        height: 30px;
        background-color: crimson;
        position: absolute;
        bottom: -30px;
        left: 0;
        display: none;
        line-height: 30px;
      }
      .rg .mp span {
        color: #fff;
      }
      /* 头部结束 */
      .tab {
        width: 1226px;
        height: 100px;
        background-color: #fff;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
      ul,
      li {
        list-style: none;
      }
      .log {
        margin-right: 150px;
      }
      .log img {
        width: 56px;
        height: 56px;
        border-radius: 10px;
      }
      .tabs {
        height: 100%;
        flex: 1;
        display: flex;
        justify-content: space-around;
        align-items: center;
      }
      .tabs li {
        height: 100%;
        line-height: 100px;
      }
      .tabs li:hover {
        color: red;
      }
      .search {
        width: 280px;
        height: 100px;
        display: flex;
        align-items: center;
        margin-left: 100px;
      }
      .search input {
        width: 70%;
        outline: none;
        height: 49px;
        padding-left: 20px;
        color: 20px;
      }
      .search span {
        display: inline-block;
        width: 20%;
        height: 49px;
        line-height: 49px;
        text-align: center;
        border: 1px solid #000;
        border-left: 0 solid #000;
        padding: 1px;
      }
      .tab-a {
        width: 100%;
        height: 0px;
        /* background-color: rgb(76, 76, 77); */
        /* border-top: 1px solid #000; */
        overflow: hidden;
        position: absolute;
        z-index: 21;

        background-color: #fff;
      }
      .tab-b {
        width: 1226px;
        height: 100%;
        /* background-color: #dd2525; */
        margin: 0 auto;
        display: flex;
        justify-content: space-around;
      }
      .tab-b li {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
      }
      .tab-b li img {
        width: 120px;
        height: 120px;
        border-right: 1px solid darkcyan;
        padding-left: 30px;
        padding-right: 30px;
      }
      /*       dffdddd */
      .swp {
        width: 100%;
        height: 460px;
      }
      .cmh {
        width: 1226px;
        height: 100%;
        background: #fff;
        margin: 0 auto;
        display: flex;
      }
      .nav {
        height: 100%;
        position: relative;
      }
      .leul {
        width: 234px;
        height: 100%;
        background-color: rgb(147, 147, 147);
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        float: left;
      }
      .leul li {
        width: 100%;
        display: flex;
        justify-content: space-around;
        padding: 10px;
      }
      .leul li span:nth-child(1) {
        width: 100px;
      }
      .leul li:hover {
        color: #fff;
      }

      .sub {
        width: 992px;
        clear: both;
        max-width: 992px;
        height: 100%;
        background-color: white;
        display: none;
        position: absolute;
        left: 234px;
        top: 0;
        z-index: 12;
      }
      .sub p {
        float: left;
      }
      .sub p img {
        width: 100px;
        height: 100px;
      }
      .sw {
        width: 992px;
        height: 100px;
      }
      .sw img {
        max-width: 992px;
        height: 460px;
      }
      .cart {
        position: relative;
        color: #000000;
      }
      .cart a {
        width: 100%;
        height: 100%;
        display: block;
        color: #ffffff;
      }

      .cart-list {
        width: 300px;
        height: 50px;
        display: block;
        background-color: #ef9090;
        position: absolute;
        right: -5px;
        z-index: 30;
        display: none;
      }
    </style>
    <link rel="stylesheet" href="./css/listicon.css" />
  </head>
  <body>
    <div class="herder">
      <div class="tou">
        <div class="lf">
          <a rel="nofollow" href="//www.mi.com/">小米官网</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="//www.mi.com/shop">小米商城</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="//iot.mi.com" target="_blank">IoT</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="//i.mi.com/" target="_blank">云服务</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="//airstar.com/home" target="_blank"
            >天星数科</a
          >
          <span class="sep">|</span>
          <a rel="nofollow" href="//youpin.mi.com/" target="_blank">有品</a>
          <span class="sep">|</span>
          <a rel="nofollow" href="//xiaoai.mi.com/" target="_blank"
            >小爱开放平台</a
          >
          <span class="sep">|</span>
          <a rel="nofollow" href="//qiye.mi.com/" target="_blank">企业团购</a>
          <span class="sep">|</span>
          <a
            rel="nofollow"
            href="//www.mi.com/aptitude/list/?id=88"
            target="_blank"
            >资质证照</a
          >
          <span class="sep">|</span>
          <a rel="nofollow" href="//www.mi.com/aptitude/list/" target="_blank"
            >协议规则</a
          >
          <span class="sep">|</span>
          <a
            rel="nofollow"
            href="//www.mi.com/appdownload/"
            target="_blank"
            class="topbar-download"
            id="J_siteDownloadApp"
          >
            下载app
            <!-- <span class="appcode">
              <img
                src="//i1.mifile.cn/f/i/17/appdownload/download.png?1"
                alt="小米商城"
                width="90"
                height="90"
              />
              小米商城APP
            </span> -->
          </a>
          <span class="sep">|</span>
          <a rel="nofollow" href="javascript:;" class="J_siteGlobalRegion"
            >Select Location</a
          >
        </div>
        <div class="rg">
          <p class="mp">
            <a href="./login.html">登录</a><span>|</span
            ><a href="./reg.html">注册</a>
          </p>
          <span>|</span><a>消息通知</a>　　
          <p class="cart">
            <a href="./cart.html"> 购物车</a>
            <span class="cart-list"
              ><img
                src="https://misc.360buyimg.com/jdf/1.0.0/unit/globalImages/1.0.0/loading.gif"
                alt=""
            /></span>
          </p>
        </div>
      </div>
    </div>
    <!-- 头部结束 -->
    <div class="tab">
      <div class="log"><img src="./imgae/logo.png" alt="" /></div>
      <ul class="tabs">
        <!-- <li></li> -->
      </ul>
      <div class="search">
        <input type="text" placeholder="热搜" />
        <span>GO</span>
      </div>
    </div>
    <div class="tab-a">
      <ul class="tab-b">
        <!-- <li>
          <img src="./imgae/logo.png" alt="" />
          <span>1214</span>
        </li> -->
      </ul>
    </div>
    <!-- /* 轮播图 &&导航*/ -->
    <div class="swp">
      <div class="cmh">
        <!-- 左导航 -->
        <div class="nav">
          <ul class="leul">
            <!-- <li data-index="0">1111</li> -->
          </ul>
          <div class="sub">
            <!-- <p>
              <img src="./imgae/logo.png" alt="" />
              <span> 小米</span>
            </p> -->
          </div>
        </div>
        <!-- 轮播 -->
        <div class="sw">
          <!-- Swiper -->
          <div class="swiper mySwiper">
            <div class="swiper-wrapper">
              <div class="swiper-slide">
                <img src="./imgae/sw1.webp" />
              </div>
              <div class="swiper-slide">
                <img src="./imgae/sw2.webp" />
              </div>
              <div class="swiper-slide">
                <img src="./imgae/sw3.webp" />
              </div>
              <div class="swiper-slide">
                <img src="./imgae/sw4.webp" />
              </div>
              <div class="swiper-slide">
                <img src="./imgae/sw5.webp" />
              </div>
            </div>
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <div class="swiper-pagination"></div>
          </div>

          <!-- Swiper JS -->
        </div>
      </div>
    </div>
    <!-- 2--- -->
    <div class="nav-ic">
      <div class="zj">
        <div class="icon">
          <a><i class="iconfont icon-jiudian"></i><span>酒店</span></a>
          <a><i class="iconfont icon-jiudian"></i><span>酒店</span></a>
          <a><i class="iconfont icon-jiudian"></i><span>酒店</span></a>
          <a><i class="iconfont icon-jiudian"></i><span>酒店</span></a>
          <a><i class="iconfont icon-jiudian"></i><span>酒店</span></a>
          <a><i class="iconfont icon-jiudian"></i><span>酒店</span></a>
        </div>
        <div class="ipr">
          <img src="./imgae/sw1.webp" alt="" />
        </div>
        <div class="ipr">
          <img src="./imgae/sw2.webp" alt="" />
        </div>
        <div class="ipr">
          <img src="./imgae/sw3.webp" alt="" />
        </div>
      </div>
      <img
        class="ct"
        src="./imgae/8034ed2ad4b10f7f117ac2529b06cfca.webp"
        alt=""
      />
      <!-- list -->
      <div class="shp">
        <div class="shp-her">
          <h1>手机</h1>
          <a href="./gd.html" class="gd">查看更多　》</a>
        </div>
        <div class="imag">
          <img src="./imgae/list.webp" alt="" />
        </div>
        <ul class="sp-list">
          <!-- <li>
            <img src="./imgae/logo.png" alt="" />
            <span>小米手机</span>
            <span>价钱:12323</span>
          </li> -->
        </ul>
      </div>
    </div>
    <!-- 2---- -->

    <script src="./js/axios.js"></script>
    <script src="./js/sw.js"></script>
    <script>
      // 用户是否登录判断
      let URL = "http://localhost:8888";
      let mp = document.querySelector(".mp");
      // 鼠标移入购物车按钮
      let cart = document.querySelector(".cart");
      let ca = document.querySelector(".cart-list");
      cart.onmouseover = () => {
        cart.style.color = "#000";
        cart.style.backgroundColor = "red";
        ca.style.backgroundColor = "red";

        ca.style.display = "block";
      };
      cart.onmouseout = () => {
        ca.style.display = "none";
        cart.style.color = "#fff";
        cart.style.backgroundColor = "#000";
      };
      function getUser(d) {
        axios.defaults.headers.common["Authorization"] =
          localStorage.getItem("token");

        axios
          .get(URL + "/users/info", {
            params: {
              id: localStorage.getItem("uid"),
            },
          })
          .then((r) => {
            console.log(r);
            if (r.data.code == 1) {
              mp.innerHTML = `<span>欢迎：${r.data.info.username}</span><b class="ab">退出登录</b>`;
              let ab = document.querySelector(".ab");
              console.log(ab);
              if (ab) {
                mp.onmouseover = function () {
                  ab.style.display = "block";
                  ab.onclick = function () {
                    axios
                      .get(URL + "/users/logout", {
                        params: {
                          id: localStorage.getItem("uid"),
                        },
                      })
                      .then((res) => {
                        console.log(res);
                      });
                    location.reload();
                  };
                };
                mp.onmouseout = function () {
                  ab.style.display = "none";
                };
              }
            }
          });
      }
      getUser();

      // 假数据
      let data = [
        { name: "Xiaomi手机", id: 1 },
        { name: "Redimi手机", id: 2 },
        { name: "笔记本", id: 3 },
        { name: "平板", id: 4 },
        { name: "家电", id: 5 },
        { name: "路由器", id: 6 },
        { name: "服务中心", id: 7 },
        { name: "社区", id: 8 },
      ];
      let tabs = document.querySelector(".tabs");
      let tabA = document.querySelector(".tab-a");
      let tabB = document.querySelector(".tab-b");
      data.forEach((v, i) => {
        tabs.innerHTML += `<li data="${v.id}">${v.name}</li>`;
      });
      tabs.onmouseover = function (e) {
        // console.log(e.target);

        tabA.style.boxShadow = " 0 1px 5px 0px #000";
        if (e.target.tagName == "LI") {
          if (e.target.getAttribute("data") < data.length - 1) {
            tabA.style.transition = ".5s";
            tabA.style.height = "200px";
            // console.log(e.target.getAttribute("data"));
            axios
              .get(URL + "/goods/list", {
                params: {
                  current: parseInt(e.target.getAttribute("data")),
                  pagesize: 6,
                },
              })
              .then(function (res) {
                console.log(res);
                let arr = res.data.list;
                let html = "";
                arr.forEach((v) => {
                  html += `<li>
                      <img src="${v.img_big_logo}" alt="" />
                      <span>${v.title.substring(0, 4)}</span>
                    </li>`;
                });
                tabB.innerHTML = html;
              })
              .catch(function (error) {
                console.log(error);
              });
          }
          // console.log(e.target.getAttribute("data"));
        }
      };
      tabs.onmouseout = function (e) {
        tabA.style.transition = "1s";
        tabA.style.height = "0px";
        tabA.style.border = "0";

        // console.log(e.target.getAttribute("data"));
      };

      // 1--左侧导航
      let nav = document.querySelector(".nav");
      let sub = document.querySelector(".sub");
      let leul = document.querySelector(".leul");

      axios.get(URL + "/goods/category").then((res) => {
        console.log(res);

        if (res.data.code == 1) {
          let assList = res.data.list;
          // console.log(assList);
          let htmlAss = "";
          assList.forEach((v, i) => {
            if (i <= 10) {
              htmlAss += `<li><span>${v}　</span><span>></span></li>`;
            }
          });
          leul.innerHTML += htmlAss;
        }
      });
      nav.onmouseover = (e) => {
        if (e.target.tagName == "LI") {
          console.log(e.target.tagName);
          sub.style.display = "block";
          console.log(e.target.innerText);
          axios
            .get(URL + "/goods/list", {
              params: {
                category: e.target.innerText,
              },
            })
            .then((res) => {
              //  接口里面好像没有商品分类的数据，那我只好自己写一些了
              let htmlr = "";
              for (let i = 0; i < parseInt(15 * Math.random()); i++) {
                htmlr += `<p>
                    <img src="./imgae/logo.png" alt="" />
                    <span> 小米</span>
                  </p>`;
              }
              sub.innerHTML = htmlr;
            });
        }
      };
      nav.onmouseleave = (e) => {
        sub.style.display = "none";
      };
      // sw
      var swiper = new Swiper(".mySwiper", {
        spaceBetween: 30,
        loop: true,
        effect: "fade",
        navigation: {
          nextEl: ".swiper-button-next",
          prevEl: ".swiper-button-prev",
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
          clickable: true,
        },
        grabCursor: true,
        // mousewheel: true, //鼠标滚轮
        autoplay: true, //等同于以下设置
        autoplay: {
          delay: 2000,

          pauseOnMouseEnter: true,
          disableOnInteraction: false,
        },
      });
      //图标
      /*

            list--ul
            */
      let listUl = document.querySelector(".sp-list");
      axios
        .get(URL + "/goods/list", {
          params: {
            current: 1,
            pagesize: 8,
          },
        })
        .then((r) => {
          let data = r.data;
          let str = "";
          console.log(data);
          if (data.code == 1) {
            data.list.forEach((s) => {
              str += `<li>
                 <a href="detail.html?pid=${s.goods_id}"> <img src="${
                s.img_big_logo
              }" alt="" /></a>
                  <span>
                    ${s.title.substring(0, 4)}
                    </span>
                  <span>${s.current_price}</span>
                </li>`;
            });
            listUl.innerHTML = str;
          }
        });

      // 点击查看更多"
    </script>
  </body>
</html>
